import React, { Component } from 'react'

class Home extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.message !== nextProps.message) {
      return true
    }
    return false
  }
  render() {
    console.log('Home render')
    return (
      <div>Home - {this.props.message}</div>
    )
  }
}

class Recommend extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.counter !== nextProps.counter) {
      return true
    }
    return false
  }
  render() {
    console.log('Recommend render')
    return (
      <div>Recommend - {this.props.counter}</div>
    )
  }
}


class App extends Component {
  constructor() {
    super()
    this.state = {
      counter: 0,
      message: 'Hello'
    }
  }
  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.counter !== nextState.counter || this.state.message !== nextState.message) {
      return true
    }
    return false
  }
  handleClick() {
    this.setState({ counter: this.state.counter + 1 })
  }
  handleChangeText() {
    this.setState({ message: 'Hello React' })
  }
  render() {
    console.log('App render')
    const { counter, message } = this.state
    return (
      <div>
        <p>App</p>
        <p>counter: { counter }</p>
        <p>message: { message }</p>
        <button onClick={() => this.handleClick()}>+1</button>
        <button onClick={() => this.handleChangeText()}>修改文本</button>
        <Home message={message} />
        <Recommend counter={counter} />
      </div>
    )
  }
}

export default App